<template>
  <div class="top-Back">
    <van-search
      class="index-search"
      background="none"
      shape="round"
      disabled
      placeholder="搜索地点/景点/游记"
      @click="skipSearch"
    />
    <van-grid square column-num="5" :border="false" class="fadeIn">
      <van-grid-item
        v-for="(item, index) in gridArr"
        :key="index"
        :icon="item.icon"
        :text="item.text"
        @click="classTravel(item.text)"
      />
    </van-grid>
  </div>
  <!-- tab切换 -->
  <van-tabs
    v-model:active="active"
    animated
    color="#f6cc4a"
    title-inactive-color="#848688"
    title-active-color="#242629"
    class="tab-view"
    @click-tab="tabTravels"
  >
    <van-tab
      title-class="title-tab"
      v-for="(item, index) in tabNav"
      :title="item.name"
      :key="index"
    >
    </van-tab>
  </van-tabs>
  <!-- 推荐 -->
  <Recomment v-show="keyWords == '001'" :newestTravel="newestTravel" />
  <!-- 瀑布流 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    offset="100"
    @load="onLoad"
  >
    <card :userTravels="userTravels" />
  </van-list>
  <div style="height: 100px"></div>

  <tabbar />
  <skIndex v-if="skeLeton" />
</template>

<script setup>
import tabbar from "@/page/Tabbar/index.vue";
import card from "@/page/Common-components/card-flow.vue";
import { ref, onMounted, onUnmounted } from "vue";
import request from "@/api/request.js";
import { useRouter } from "vue-router";
const $router = useRouter(); // 这是路由跳转的
import Recomment from "@/page/index/components/recomment.vue";
import skIndex from "@/page/Skeleton-screen/SK-index.vue";

// 标签切换索引值
const active = ref(0);
// 宫格:游记类型
const gridArr = ref([]);
// 推荐四个最新的游记
const newestTravel = ref([]);
const showRecomment = ref(true);
// tab游记分类切换
const tabNav = ref([]);
// 瀑布流：用户游记
const userTravels = ref([]);
// 骨架屏
const skeLeton = ref(true);
onMounted(async () => {
  const four_travel = await request.get("/recomm_travel");
  const tabArr = await request.get("/travelogue_class");
  const user_travels = await request.get("/user_travels", {
    keywords: "001",
    page: 1,
  });
  const { category_nav, recomm_travel } = four_travel.data;
  if (category_nav.length > 0) {
    category_nav[5].text = "结伴";
  }

  gridArr.value = category_nav;
  newestTravel.value = recomm_travel;
  tabNav.value = tabArr.data;
  userTravels.value = user_travels.data;
  setTimeout(() => {
    skeLeton.value = false;
  }, 2000);
});
// 点击tab切换分类游记
const keyWords = ref("001");
async function tabTravels(val) {
  page.value = 1;
  finished.value = false;
  console.log(tabNav.value[val.name].key);
  const query = tabNav.value[val.name].key;
  keyWords.value = query;
  const user_travels = await request.get("/user_travels", {
    keywords: query,
    page: 1,
  });
  userTravels.value = user_travels.data;
}
// 上啦加载
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
async function onLoad() {
  page.value++;
  const user_travels = await request.get("/user_travels", {
    keywords: keyWords.value,
    page: page.value,
  });
  userTravels.value = [...userTravels.value, ...user_travels.data];
  loading.value = false;
  if (user_travels.data.length === 0) {
    finished.value = true;
  }
}
onUnmounted(() => {
  finished.value = false;
});
// 跳转景点搜索
function skipSearch() {
  $router.push("/search-travel");
}
// 分类跳转
function classTravel(keywords) {
  if (keywords == "结伴") {
    $router.push({ path: "/companion" });
  } else {
    $router.push({ path: "/query-travel", query: { keywords, type: "101" } });
  }
}
// 发布成功触发
import emitter from "@/api/event.js";
emitter.on("release-success", async () => {
  const four_travel = await request.get("/recomm_travel");
  const { recomm_travel } = four_travel.data;
  newestTravel.value = recomm_travel;
  int.value = 0;
});
</script>

<style>
@import url("https://fonts.googleapis.com/css?family=Lobster&display=swap");
.top-Back {
  background: linear-gradient(to bottom, #e9e9e9 20%, #fbfcfc 40%);
  --van-grid-item-content-background: "none";
  --van-grid-item-text-color: #7f7f7f !important;
}
.index-search {
  /* --van-search-content-background:#ffffff !important; */
  /* --van-search-background:#f8f8f8 !important; */
  /* --van-grid-item-content-background:#f8f8f8 !important; */
}
.tab-view .van-tabs__nav--line div:nth-child(2) {
  color: #91c36f !important;
  font-family: "Lobster", cursive;
  /* transform: skew(-15deg); */
}
.title-tab {
  font-weight: bold;
  font-size: 16px;
}
.tab-view .van-tabs__line {
  width: 30px;
  height: 5px;
}
</style>
